<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../src/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>

  <style>
    .max {
      font-size: 30px;
      color: cornflowerblue;
    }

    .layui-card1 {
      /* height: 100px; */
      /* background: #409eff; */
      padding: 20px;
    }
  </style>

  <div style="padding: 15px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md4">
        <div class="layui-card layui-card1" style="background: #409eff;color: #fff;height: 66px;">
          <div>
            <p style="font-size: 20px;height: 50px;">昨日打卡总人数
            <span style="font-size: 35px;margin-right: 20px;text-align: right;float: right;">235</span>
            </p>
            
          </div>
        </div>
      </div>
      
      <div class="layui-col-md4">
        <div class="layui-card layui-card1" style="background: #67c23a;color: #fff;height: 66px;">
          <div>
            <p style="font-size: 20px;height: 50px;">昨日总人数
              <span style="font-size: 35px;margin-right: 20px;text-align: right;float: right;">980</span>
              </p>
             
                <p style="font-size: 15px;margin-right: 20px;text-align: right;">昨日打卡占比<span style="margin-left: 10px;">22%</span></p>
          </div>

        </div>
      </div>
      <div class="layui-col-md4">
        <div class="layui-card layui-card1" style="background: #899cec;color: #fff;height: 66px;">
          <div>
            <div>
              <p style="font-size: 20px;height: 50px;">合同人数
              <span style="font-size: 35px;margin-right: 20px;text-align: right;float: right;">1088</span>
              </p>
              <p style="font-size: 15px;margin-right: 20px;">
                <span>昨日打卡占比<span style="margin-left:10px;">24%</span></span>
                <span style="float:right;">昨日人数占比<span style="margin-left: 10px;">90%</span></span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header" style="font-size: 18px;">昨日打卡报告</div>
          <div class="layui-card-body">
            <div id="container" style="height:400px;"></div>
          </div>

        </div>
      </div>
      <div class="layui-col-md12" id="div_detail">

      </div>

    </div>
  </div>

  <!-- <link rel="stylesheet" href="../../src/css/layui.css"> -->
  <script src="../../src/layui.js" charset="utf-8"></script>
  <!-- <script src="....//src/setter.js?v=0513"></script> -->
  <script src="../../pages/js/jquery.min.js"></script>
  <script src="../../pages/js/echarts.min.js"></script>
  <script src="../../pages/js/theme/westeros.js"></script>
  <script src="../../pages/js/theme/macarons.js"></script>
  <script src="../../pages/js/theme/purple-passion.js"></script>
  <script src="../../pages/js/theme/dark.js"></script>
  <script>
    layui.use(['table', 'element', 'form', 'laydate'], function () {

      var $ = layui.jquery;

      $.ajax({
        url: '../json/console.json',
        dataType: 'json',
        async: true,
        type: 'get',
        success: function (result) {
          console.log(result);

          var data = result.data;
          var pass = [];
          var fail = [];
          var none = [];
          var company = [];
          for (var i = 0; i < data.length; i++) {
            company.push(data[i].name);
            pass.push(data[i].pass);
            fail.push(data[i].fail);
            none.push(data[i].none);
          }
          console.log(company);
          loadChart(company, pass, fail, none)
        },
        error: function (data) {
          console.log(data);
        }
      });


      $.ajax({
        url: '../json/clock.json',
        dataType: 'json',
        async: true,
        type: 'get',
        success: function (result) {
          console.log(result);
          var company = [];
          for (var i = 0; i < result.data.length; i++) {
            company.push(result.data[i].name);

          }
          loadCompany(company);

          for (var i = 0; i < result.data.length; i++) {
            loadCompanyChart(result.data[i], i);

          }
        },
        error: function (data) {
          console.log(data);
        }
      });

      //显示公司列表
      function loadCompany(company) {
        var _html = '';

        for (var i = 0; i < company.length; i++) {
          //每行显示4个
          //余0的时候和余3的时候加
          _html += '<div class="layui-col-md3">';
          _html += '<div class="layui-card" style="margin: 5px;">';
          _html += '<div class="layui-card-header" style="font-size: 18px;">' + company[i] + '</div>';
          _html += '<div class="layui-card-body">';
          _html += ' <div id="container' + i + '" style="height:200px;"></div>';
          _html += '</div></div> </div>';

        }

        console.log(_html);
        $('#div_detail').html(_html);
      }

      //加载柱状图
      function loadChart(company, pass, fail, none) {

        var dom1 = document.getElementById("container");
        var myChart0 = echarts.init(dom1, "dark");
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['合格', '不合格', '未考核']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: company
          },
          series: [
            {
              name: '合格',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: pass
            },
            {
              name: '不合格',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: fail
            },
            {
              name: '未考核',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: none
            }
          ]
        };
        if (option && typeof option === "object") {
          myChart0.setOption(option, true);
        }

      }

      //加载饼图
      function loadCompanyChart(data, i) {
        var dom1 = document.getElementById("container" + i);
        var myChart1 = echarts.init(dom1, "dark");

        option1 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['打卡人数', '未打卡人数']
          },
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              itemStyle: {

                normal: {
                  label: {
                    show: true,
                    formatter: '{c} ({d}%)'
                  },
                  labelLine: { show: true }
                }
              },
              data: [
                { value: data.clock, name: '打卡人数' },
                { value: data.none, name: '未打卡人数' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart1.setOption(option1, true);
      }


    });



  </script>

</body>

</html>